<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #biao {
            border: 2px solid black;
            width: 1000px;


        }

        #biao td {
            border: 1px solid black;
            text-align: center;
        }

        #biao th {
            height: 50px;
        }

        #add {
            width: 320px;
            height: 500px;
            background-color: blanchedalmond;
            display: none;
            margin: 0 auto;
            z-index: 5;
            display: flex;
            flex-wrap: wrap;
            padding-top: 40px;
            padding-left: 20px;

        }

        input {
            height: 30px;
        }

        #abc {
            margin-left: 500px;
        }
    </style>
</head>

<body>
    <table id="biao">
        <tr>
            <th>商品ID</th>
            <th>商品照片</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>创建时间</th>
            <th>库存</th>
            <th>详情</th>
            <th>操作</th>
        </tr>


    </table>
    <div id="add">
        商品照片：<input type="text" id="zp">
        商品名称：<input type="text" id="mz">
        商品单价：<input type="text" id="jg">
        商品日期：<input type="text" id="sj">
        商品库存：<input type="text" id="kc">
        商品详情：<input type="text" id="xq">

    </div>
    <div id="xiu">
        商品照片：<input type="text" id="zpp">
        商品名称：<input type="text" id="mzz">
        商品单价：<input type="text" id="jgg">
        商品日期：<input type="text" id="sjj">
        商品库存：<input type="text" id="kcc">
        商品详情：<input type="text" id="xqq">

    </div>
    <button onclick="addd()" id="abc">新增</button>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            data: {
                goodsPhoto: $("#goodsPhoto").val(),
                goodsName: $("#goodsName").val(),
                goodsPrice: $("#goodsPrice").val(),
                goodsCreationTime: $("#goodsCreationTime").val(),
                goodsInventory: $("#goodsInventory").val(),
                goodsdetail: $("#goodsdetail").val(),

            },
            success: function (nihao) {
                console.log(nihao)
                let arr = nihao.data
                arr.forEach(element => {
                    let a = "";
                    a = `
                        <tr>
             <td>${element.goodsId}</td>
             <td>${element.goodsPhoto}</td>
             <td>${element.goodsName}</td>
             <td>${element.goodsPrice}</td>
             <td>${element.goodsCreationTime}</td>
             <td>${element.goodsInventory}</td>
             <td>${element.goodSdetail}</td>
             <td>
                <button onclick="del(${element.goodsId})">删除</button>
                 <button onclick="a(${element.goodsId})">确认修改</button>
                </td>
        </tr>
                        `
                    $("#biao").append(a)
                });
            }
        })
        $("#add").hide()
        function addd() {
            $("#add").show()
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "post",
                data: {
                    goodsPhoto: $("#zp").val(),
                    goodsName: $("#mz").val(),
                    goodsPrice: $("#jg").val(),
                    goodsCreationTime: $("#sj").val(),
                    goodsInventory: $("#kc").val(),
                    goodSdetail: $("#xq").val()
                },
                success: function (edit) {
                    alert(edit)
                }
            })
        }

        function del(userId) {
            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "post",
                data: {

                    id: userId
                },
                success: function (Del) {

                    console.log(Del)
                }
            })
            location.reload()
        }

        function a(xiugai) {
            console.log(xiugai);
            
            $.ajax({
                url: "http://172.16.106.87:8080/upDataGoods",
                type: "post",

                data: {
                    goodsId:xiugai,
                    goodsPhoto: $("#zpp").val(),
                    goodsName: $("#mzz").val(),
                    goodsPrice: $("#jgg").val(),
                    goodsCreationTime: $("#sjj").val(),
                    goodsInventory: $("#kcc").val(),
                    goodSdetail: $("#xqq").val(),
                    
                },
                success: function (res) {
                    console.log(res);

                }
            })
            location.reload()
        }

    </script>
</body>

</html>